<!--
 * @Author: Li Zengkun
 * @Date: 2022-08-06 14:31:10
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-07 19:10:14
 * @Description: 优选
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>Document</title>
</head>

<body>
    <header>
        <span></span> 优选
        <span></span>
    </header>

    <!-- 中部 -->
    <div class="content">
        <!-- banner -->
        <div class="banner">
            <div class="carousel">
                <a href="#">
                    <img src="../img/selection/j (13).png" alt="">
                </a>
                <a href="#">
                    <img src="../img/selection/j (4).png" alt="">
                </a>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#">
                            <img src="../img/selection/j (1).png" alt="">
                            <span>本家推荐</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/selection/j (14).png" alt="">
                            <span>挑选师推荐</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/selection/j (2).png" alt="">
                            <span>私物推荐</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/selection/j (3).png" alt="">
                            <span>本家LOOK</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 本家甄选 -->
        <div class="benjia-selection content-item">
            <div class="headline">
                <p>本家甄选</p>
            </div>
            <ul>
                <li class="">
                    <div class="img-box">
                        <img src="../img/selection/本家.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title">叠韵滤光器，分为造型大师</p>
                        <p class="subtitle">光笼，来自斯德哥尔摩的礼赞</p>
                    </div>
                </li>
                <li class="">
                    <div class="text">
                        <p class="title">叠韵滤光器，分为造型大师</p>
                        <p class="subtitle">光笼，来自斯德哥尔摩的礼赞</p>
                    </div>
                    <div class="img-box">
                        <img src="../img/selection/j (1).png" alt="">
                    </div>
                </li>
                <li class="">
                    <div class="text">
                        <p class="title">叠韵滤光器，分为造型大师</p>
                        <p class="subtitle">光笼，来自斯德哥尔摩的礼赞</p>
                    </div>
                    <div class="img-box">
                        <img src="../img/selection/j (1).png" alt="">
                    </div>
                </li>
            </ul>
        </div>

        <!-- 十点一刻 -->
        <div class="ten-oclock content-item">
            <div class="headline">
                <p>十点一刻</p>
            </div>
            <div class="carousel">
                <a href="#">
                    <p class="headline">今日话题</p>
                    <p class="title">一念之间的重要性</p>
                    <p class="subtitle">有没有哪个瞬间的念头，改变你一段时间的生活轨迹？</p>
                </a>
                <a href="#">
                    <p class="headline">今日话题</p>
                    <p class="title">一念之间的重要性</p>
                    <p class="subtitle">有没有哪个瞬间的念头，改变你一段时间的生活轨迹？</p>
                </a>
                <a href="#">
                    <p class="headline">今日话题</p>
                    <p class="title">一念之间的重要性</p>
                    <p class="subtitle">有没有哪个瞬间的念头，改变你一段时间的生活轨迹？</p>
                </a>

            </div>
        </div>

        <!-- 本家推荐 -->
        <div class="benjia-recommend benjia-selection content-item">
            <div class="headline">
                <p>本家推荐</p>
            </div>
            <ul>
                <li class="">
                    <div class="img-box">
                        <img src="../img/selection/j.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title">叠韵滤光器，分为造型大师</p>
                        <p class="subtitle">光笼，来自斯德哥尔摩的礼赞</p>
                    </div>
                </li>

            </ul>
        </div>

        <!-- 本家LOOK -->
        <div class="benjia-look content-item">
            <div class="headline">
                <p>本家LOOK</p>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <div class="img-box grid">
                            <img src="../img/selection/look (6).png" alt="">
                            <img src="../img/selection/look (1).png" alt="">
                            <img src="../img/selection/look (7).png" alt="">
                        </div>
                        <p>给牛仔加点火山岩</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img-box grid">
                            <img src="../img/selection/look (3).png" alt="">
                            <img src="../img/selection/look (5).png" alt="">
                            <img src="../img/selection/look (8).png" alt="">
                        </div>
                        <p>婚纱拍照必看功课</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img-box grid">
                            <img class="single" src="../img/selection/look (10).png" alt="">
                        </div>
                        <p>夏天的清凉，多亏了这墨绿</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img-box grid">
                            <img src="../img/selection/look (9).png" alt="">
                            <img src="../img/selection/look (2).png" alt="">
                            <img src="../img/selection/look (12).png" alt="">
                        </div>
                        <p>你的厨房只是少了他</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="#">
            <img src="../img/footer/首页1.png" alt="">
            <span>首页</span>
        </a>
        <a class="active" href="#">
            <img src="../img/footer/钻石 (2).png" alt="">
            <span>优选</span>
        </a>
        <a href="#">
            <img src="../img/footer/分类2.png" alt="">
            <span>分类</span>
        </a>
        <a href="#">
            <img src="../img/footer/购物车2.png" alt="">
            <span>购物车</span>
        </a>
        <a href="#">
            <img src="../img/footer/我的2.png" alt="">
            <span>我的</span>
        </a>
    </nav>

</body>




<style>
    .content {
        /* padding-bottom: 13vw; */
        height: calc(100vh - 26.07vw);
        overflow: auto;
        background-color: #fff;
        width: 100%;
        background-color: #f4f4f4;
    }
    
    .content .banner .carousel {
        background-color: #fff;
        width: auto;
        height: 52vw;
        overflow-x: auto;
        white-space: nowrap;
        padding-top: 2.8vw;
    }
    
    .content .banner .carousel>a {
        width: 88vw;
        height: 48vw;
        overflow: hidden;
        border-radius: 1.33vw;
        margin-left: 2.8vw;
        position: relative;
        display: inline-block;
    }
    
    .content .banner .carousel>a>img {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0%;
        right: 0;
        margin: auto;
    }
    
    nav {
        background: #fff;
    }
    
    nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100vw;
        /* padding: 0 2.8vw; */
    }
    
    nav ul>li {
        width: 25%;
        box-sizing: border-box;
        padding: 5.27vw 0;
        text-align: center;
    }
    
    nav ul>li>a img {
        width: 21.87vw;
        height: 21.87vw;
        border-radius: 1.33vw;
        margin: 0 auto;
        display: block;
        margin-bottom: 2.4vw;
    }
    
    nav ul>li>a span {
        font-size: 3.2vw;
        line-height: 2.67vw;
        letter-spacing: 0.16vw;
        color: #333333;
    }
    
    .content-item {
        margin-top: 2.67vw;
        background-color: #fff;
        width: 100%;
    }
    
    .content-item .headline {
        text-align: center;
        padding: 3.47vw;
    }
    
    .content-item .headline>p:nth-child(1) {
        font-size: 3.73vw;
        font-weight: bold;
        letter-spacing: 0.19vw;
        color: #333333;
    }
    /* 本家甄选 */
    
    .benjia-selection ul {
        padding: 2.8vw;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .benjia-selection ul>li {
        box-sizing: border-box;
        border: 0.27vw solid #f4f4f4;
        margin-bottom: 2.8vw;
        border-radius: 1.33vw;
        overflow: hidden;
    }
    
    .benjia-selection ul>li:nth-child(1) .img-box {
        width: 100%;
        height: 53.2vw;
        overflow: hidden;
    }
    
    .benjia-selection ul>li:nth-child(1) .img-box img {
        width: 100%;
        height: auto;
    }
    
    .benjia-selection .text {
        padding: 4.27vw 0 8vw 2.8vw;
    }
    
    .benjia-selection .text .title {
        font-size: 4vw;
        line-height: 4vw;
        letter-spacing: 0.2vw;
        color: #333333;
    }
    
    .benjia-selection .text .subtitle {
        font-size: 3.47vw;
        margin-top: 4.27vw;
        line-height: 3.47vw;
        color: #999999;
    }
    
    .benjia-selection ul>li {
        display: flex;
        padding: 2.8vw;
        padding-left: 0;
        justify-content: space-between;
    }
    
    .benjia-selection ul>li:nth-child(1) {
        display: block;
        padding: 0;
    }
    
    .benjia-selection ul>li .img-box {
        width: 30.67vw;
        height: 30.67vw;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .benjia-selection ul>li .img-box img {
        width: 100%;
        height: 100%;
    }
    /* 十点一刻 */
    
    .ten-oclock {
        padding-bottom: 2.8vw;
    }
    
    .ten-oclock .carousel {
        background-color: #fff;
        width: auto;
        /* height: 52vw; */
        overflow-x: auto;
        white-space: nowrap;
        padding: 2.8vw 0;
        padding-right: 2.8vw;
    }
    
    .ten-oclock .carousel>a {
        width: 78.93vw;
        height: 54.53vw;
        /* height: 48vw; */
        overflow: hidden;
        border-radius: 1.33vw;
        margin-left: 2.8vw;
        position: relative;
        display: inline-block;
        padding: 6.93vw 9.2vw;
        text-align: center;
        box-sizing: border-box;
        background-image: url('../img/selection/comment_bg.png');
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    .ten-oclock .carousel>a .headline {
        font-size: 2.93vw;
        font-weight: bold;
        line-height: 2.93vw;
        color: #999999;
        position: relative;
    }
    
    .ten-oclock .carousel>a .headline::before {
        content: '';
        position: absolute;
        top: 45%;
        width: 3.33vw;
        height: 0.27vw;
        left: 30%;
        background: #8a8a8a;
    }
    
    .ten-oclock .carousel>a .headline::after {
        content: '';
        position: absolute;
        top: 45%;
        width: 3.33vw;
        height: 0.27vw;
        right: 30%;
        background: #8a8a8a;
    }
    
    .ten-oclock .carousel>a .title {
        font-size: 4vw;
        font-weight: bold;
        line-height: 4vw;
        letter-spacing: 0.2vw;
        color: #333333;
    }
    
    .ten-oclock .carousel>a .subtitle {
        font-size: 3.2vw;
        line-height: 4vw;
        margin-top: 5vw;
        text-align: center;
        white-space: pre-wrap;
        color: #999999;
    }
    /* 本家LOOK */
    
    .grid {
        display: grid;
    }
    
    .benjia-look ul {
        background-color: #f8f8f8;
        padding: 0 2.8vw;
    }
    
    .benjia-look ul>li {
        background-color: #fff;
        padding: 2.8vw;
        margin-top: 2.8vw;
    }
    
    .benjia-look ul>li:last-child {
        margin-bottom: 2.8vw;
    }
    
    .benjia-look ul>li p {
        font-size: 3.47vw;
        font-weight: bold;
        line-height: 3.47vw;
        letter-spacing: 0.17vw;
        padding: 4.27vw 0 2.8vw 0;
        color: #333333;
    }
    
    .benjia-look .img-box {
        height: 52.53vw;
        grid-template-rows: 25.6vw 25.6vw;
        grid-template-columns: 61.87vw 25.87vw;
        grid-gap: 1.33vw;
    }
    
    .benjia-look .img-box>img {
        height: 100%;
        width: 100%;
    }
    
    .benjia-look .img-box>img.single {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    .benjia-look .img-box>img:nth-child(1) {
        grid-row-start: 1;
        grid-row-end: 3;
        /* grid-column-start: 1;
        grid-column-end: 3; */
    }
</style>

</html>